import React, {Component} from 'react';
import style from "./Seek.module.css";
import Fetch from "../Fetch";
import { Input } from 'antd';
import {MoreOutlined} from "@ant-design/icons";
class Seek extends Component {
    constructor(props) {
        super(props);
        this.state={
            songs:[],
            idArray:[],//id数组
            tracks:[],
            dataArray:[],
            name:'',
        }
    }
    render() {
        return (
            <div className={style.root}>
               <h1>搜索</h1>
                <Input placeholder="Basic usage"  onPressEnter={this.ok.bind(this)} ref={'input'}/>
                {this.state.songs.map((v,i)=>{
                    return <li key={i} style={{display:"flex"}} className={style.gequ} onClick={this.liplay.bind(this,v,i)}>
                        <div className={style.gequone}>{i+1}</div>
                        <div className={style.gequtwo}>
                            <p>{v.name}</p>
                            <p>{v.artists.map((name,j)=>{
                                if (j==v.artists.length-1){
                                    return name.name
                                }else {
                                    return name.name+'/'
                                }
                            })} -{v.album.name}</p>
                        </div>
                        <div className={style.gequthree}> <span style={{float:"right"}}><MoreOutlined  /></span></div>
                    </li>
                })}
            </div>
        );
    }
    liplay(v,i){
        this.props.history.push({pathname:"/play",state:{tracks:this.state.dataArray,id:v.id,idArray:this.state.idArray,index:i}})
    }
    ok(){
        console.log(this.refs.input.value)

    }
    componentDidMount() {
        Fetch.get("http://localhost:3000/search?keywords="+this.state.name).then(data=>{
            console.log(data.result.songs)
            let AddArray=[];
            let DataArrat=[];
            data.result.songs.forEach((tiem,index)=>{
                AddArray.push(tiem.id);
                DataArrat.push({name:tiem.name,picUrl:'https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',author:tiem.artists})
            })
            this.setState({
                songs:data.result.songs,
                idArray:AddArray,
                dataArray:DataArrat,
            })

        })
    }
}

export default Seek;